<template>
  <div class="max-w-md mx-auto py-12">
    <h2 class="text-2xl font-bold mb-6 text-center">{{ $t('auth.login') }}</h2>
    
    <form @submit.prevent="handleLogin" class="space-y-6">
      <div>
        <label class="block text-sm font-medium">{{ $t('email') }}</label>
        <input
          v-model="form.email"
          type="email"
          required
          class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
        />
      </div>

      <div>
        <label class="block text-sm font-medium">{{ $t('password') }}</label>
        <input
          v-model="form.password"
          type="password"
          required
          class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
        />
      </div>

      <button
        type="submit"
        class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
      >
        {{ $t('auth.login') }}
      </button>

      <div class="mt-4 text-center">
        <NuxtLink
          to="/auth/register"
          class="text-blue-600 hover:text-blue-800 text-sm"
        >
          {{ $t('auth.register') }}
        </NuxtLink>
        <span class="mx-2">·</span>
        <NuxtLink
          to="/auth/forgot-password"
          class="text-blue-600 hover:text-blue-800 text-sm"
        >
          {{ $t('auth.forgot_password') }}
        </NuxtLink>
      </div>

      <div class="relative">
        <div class="absolute inset-0 flex items-center">
          <div class="w-full border-t border-gray-300"></div>
        </div>
        <div class="relative flex justify-center text-sm">
          <span class="px-2 bg-white text-gray-500">{{ $t('or') }}</span>
        </div>
      </div>

      <button
        @click="handleGoogleLogin"
        type="button"
        class="w-full flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
      >
        <svg class="w-5 h-5 mr-2" viewBox="0 0 24 24">
          <path
            fill="#4285F4"
            d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
          />
          <path
            fill="#34A853"
            d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
          />
          <path
            fill="#FBBC05"
            d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
          />
          <path
            fill="#EA4335"
            d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
          />
        </svg>
        {{ $t('auth.google_login') }}
      </button>
    </form>
  </div>
</template>

<script setup>
const { $toast } = useNuxtApp()
const form = reactive({
  email: '',
  password: ''
})

const handleLogin = async () => {
    console.log('Form data:', form)
  try {
    const { data } = await $fetch('/api/auth/login', {
      method: 'POST',
      body: form
    })

    console.log('Login response:', data)
    
    // 处理登录成功逻辑
    if (data.token) {
      localStorage.setItem('authToken', data.token)
      await navigateTo('/dashboard')
    }
  } catch (error) {
    $toast.error($t(`auth.${error.data?.statusMessage}`) || $t('auth.login_failed'))
  }
}

const handleGoogleLogin = () => {
  window.location.href = '/api/auth/google'
}
</script>

<style lang="scss" scoped>
@media (max-width: 640px) {
  .max-w-md {
    width: 90%;
    padding: 1rem;
  }
}
</style>